import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'
import { Tabbar } from 'react-vant';
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons';
import { mainRouter } from '../router/RouterConfig';
function Index() {
  return (
    <div>
      <header>
        头
      </header>
      <main>
        <Outlet/>
      </main>
      <footer>
        <div className='demo-tabbar'>
          <Tabbar>
            {
              mainRouter.map((item,index)=>(
                <Tabbar.Item key={index}>
                  <NavLink to={item.path}>{item.title}</NavLink>
                </Tabbar.Item>
              ))
            }
            {/* <Tabbar.Item icon={<HomeO />}></Tabbar.Item>
            <Tabbar.Item icon={<Search />}>标签</Tabbar.Item>
            <Tabbar.Item icon={<FriendsO />}>标签</Tabbar.Item>
            <Tabbar.Item icon={<SettingO />}>标签</Tabbar.Item> */}
          </Tabbar>
        </div>
      </footer>
      
    </div>
    
  )
}

export default Index